import React,{useEffect,memo} from 'react';
import {connect} from 'react-redux';
import {brandDetail} from '../../../store/actions';
import style from './index.module.scss';
import Header from '../../../components/Header';
const WrapHeader = memo(Header);

interface Iprops{
    getInfo:(id:number)=>void,
    match:any,
    brand:{[key:string]:any}
}

const Cart:React.FC<Iprops> = props=>{
    useEffect(()=>{
        const{match:{params:{id}}} = props;
        props.getInfo(id)
    // eslint-disable-next-line react-hooks/exhaustive-deps
    },[])
    return <div className={style.brand}>
        <WrapHeader title={props.brand.name}/>
        <div className={style.wrap}>
            <img src={props.brand.list_pic_url} alt=""/>
            <div className={style.msg}>
                {props.brand.simple_desc}
            </div>
        </div>
    </div>
}
const mapStateToProps=(state:any)=>{
    return state.home
}
const mapDispatchToProps=(dispatch:Function)=>{
    return {
        getInfo:(id:number)=>{
            dispatch(brandDetail(id));
        }
    }
}
export default connect(mapStateToProps,mapDispatchToProps)(Cart) 
